<script setup>
import { useRoute, useRouter } from 'vue-router'
import { reactive, ref, onMounted, onUnmounted, nextTick, computed, watch } from 'vue';
const $route = useRoute();
const $router = useRouter()

const inchoosestyle = ref("left:-2vw")//footer距离改变设置
const routerlink = (val) => {
  //底下深色的滑动控制
  switch (val) {
    case 'home':
      inchoosestyle.value = "left:-2vw";
      break;
    case 'scenario':
      inchoosestyle.value = "left:25vw";
      break;
    case 'find':
      inchoosestyle.value = "left:50vw";
      break;
    case 'user':
      inchoosestyle.value = "left:78vw";
      break;
  }

  $router.push({name:val});
}

</script>

<template>
  <body class="w-[100vw] h-[100vh] select-none bg-[#fff2df] bg-cover bg-no-repeat bg-center" style="background-image:url(../../background.png)">
    <router-view></router-view>
    <footer class="fixed w-full h-[4rem] bottom-0 bg-[#ffd073]  flex justify-around items-center overflow-hidden text-[#bf7130]">
        <icon @click="routerlink('home')" class="w-1/4 h-full flex justify-center items-center z-10"><i class="iconfont">&#xe698;</i></icon>
        <icon @click="routerlink('scenario')" class="w-1/4 h-full flex justify-center items-center z-10"><i class="iconfont">&#xeb61;</i></icon>
        <icon @click="routerlink('find')" class="w-1/4 h-full flex justify-center items-center z-10"><i class="iconfont">&#xe732;</i></icon>
        <icon @click="routerlink('user')" class="w-1/4 h-full flex justify-center items-center z-10"><i class="iconfont">&#xe688;</i></icon>
        <div class="w-full flex items-center absolute">
           <inchoose class="w-1/4 h-[7rem] rounded-full bg-gradient-to-r from-[#ffe259] to-[#ffa751] absolute transition-all duration-220 ease-in-out shadow-2xl" :style="inchoosestyle"></inchoose>
        </div>
    </footer>
  </body>
</template>

<style>
@font-face {
  font-family: 'iconfont';  /* Project id 4312277 */
  src: url('//at.alicdn.com/t/c/font_4312277_if35qp68s1f.woff2?t=1698849740337') format('woff2'),
       url('//at.alicdn.com/t/c/font_4312277_if35qp68s1f.woff?t=1698849740337') format('woff'),
       url('//at.alicdn.com/t/c/font_4312277_if35qp68s1f.ttf?t=1698849740337') format('truetype');
}

.iconfont{
    font-family:"iconfont" !important;
    font-size:24px;
    font-style:normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;

}
</style>
